<template>
  <div class="menu">
    <div>
      <van-address-list
        :list="list"
        default-tag-text="默认"
        :switchable="false"
      />
    </div>
    <div>
      <van-notice-bar
        left-icon="volume-o"
        background="#dae1f7"
        :scrollable="false"
        mode="link"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item
            >杨枝甘露系列经典回归 ! 芒果果泥＋人气椰浆</van-swipe-item
          >
          <van-swipe-item>【海盐芝士茉莉鸳鸯】上新</van-swipe-item>
          <van-swipe-item
            >3000吨高品质豆!瑞幸拿下最大咖啡生豆贸易单</van-swipe-item
          >
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="menu-box">
      <div class="menu-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.typeDesc"
            v-for="(item, index) in menuType"
            :key="index"
            @click="getProductByType(item.type)"
          />
        </van-sidebar>
      </div>

      <div class="menu-right">
        <div class="product-box">
          <div
            class="product-item"
            v-for="(item, index) in productData"
            :key="index"
            @click="viewDetail(item.pid)"
          >
            <Product :pro="item" />
          </div>
        </div>
        <div class="text">我也是有底线的~</div>
      </div>
    </div>
  </div>
</template>

<script>
import Product from "../components/Product.vue";
export default {
  name: "Menu",
  data() {
    return {
      activeKey: 0,
      menuType: [],
      productData: [],
      list: [],
    };
  },
  components: {
    Product,
  },
  created() {
    this.getProductType();
    this.getAddressData();
  },
  methods: {
    getProductType() {
      this.axios({
        method: "get",
        url: "/type",
      })
        .then((result) => {
          if (result.data.code === 400) {
            result.data.result.unshift({
              type: "isHot",
              typeDesc: "热卖推荐",
            });
            this.menuType = result.data.result;
            let type = result.data.result[this.activeKey].type;
            this.getProductByType(type);
          }
        })
        .catch((err) => {
        });
    },

    getProductByType(type) {
      let key = "";
      let value = "";
      if (type === "isHot") {
        key = "isHot";
        value = 1;
      } else {
        key = "type";
        value = type;
      }
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((result) => {
          if (result.data.code === 500) {
            this.productData = result.data.result;
          }
        })
        .catch((err) => {
        });
    },
    getAddressData() {
      this.axios({
        method: "get",
        url: "/findAddress",
      })
        .then((result) => {
          if (result.data.code === 700) {
            this.$toast(result.data.msg);
            this.$router.push({ name: "Login" });
            return;
          }
          if (result.data.code === 20000) {
            result.data.result.forEach((item) => {
              item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`;
              if(item.isDefault === 1){
                let arr = [];
                arr.push(item);
                this.list = arr;
              }
            });
          }
        })
        .catch((err) => {
        });
    },
    viewDetail(pid) {
      this.$router.push({ name: "Detail", params: { pid } });
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  position: fixed;
  top: 0;
  bottom: 50px;
  right: 0;
  left: 0;
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  /deep/ .van-icon.van-icon-volume-o.van-notice-bar__left-icon {
    color: #0c34ba;
  }
  /deep/ .van-icon.van-icon-arrow.van-notice-bar__right-icon {
    color: #0c34ba;
  }
  /deep/ .van-swipe-item {
    color: #0c34ba;
  }
  /deep/ .van-address-list{
    padding: 0px;
  }
  /deep/ .van-tag.van-tag--round.van-tag--danger.van-address-item__tag{
    background-color: #0c34ba;
  }
  .product-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    border-radius: 10px;
    .product-item {
      width: 100%;
      margin-bottom: 10px;
    }
  }
  .menu-box {
    background-color: #eee;
    display: flex;
    height: calc(100% - 50px);
    .menu-left {
      width: 100px;
      height: 100%;
      overflow-y: auto;
      background-color: #f1f2f5;
      /deep/ .van-sidebar {
        width: 100%;
      }
      /deep/ .van-sidebar-item--select::before {
        margin-left: -5px;
        width: 10px;
        height: 15%;
        border-radius: 50%;
        background-color: #0c34ba;
      }
      /deep/ .van-sidebar-item {
        background-color: #f1f2f5;
      }
      /deep/ .van-sidebar-item--select {
        padding-right: 10px;
        background-color: #ccc;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
      }
    }
    .menu-right {
      width: calc(100% - 120px);
      height: 100%;
      overflow-y: auto;
      padding-left: 10px;
      padding-right: 10px;
      background-color: #f1f2f5;
      .product-box {
        background-color: #fff;
        margin-bottom: 30px;
      }
      .text {
        text-align: center;
        font-size: 16px;
        color: #bbb;
        padding-bottom: 90px;
      }
    }
  }
}
</style>